Themes

Themes apply a set of styles to elements or areas. They apply a combination of colors for backgrounds, text, and borders.

Boxdev ready

Preview

Code

<div class="slds-box">
  <p>This is a regular sized box.</p>
</div>
<div class="slds-box slds-box--small">
  <p>This is a small box.</p>
</div>
<div class="slds-box slds-box--x-small">
  <p>This is an extra small box.</p>
</div>

A box theme applies spacing, a border, and rounded corners to areas of content. Three padding settings are available. You can also add a color theme to your box.

Colordev ready

Preview

Code

<div class="slds-box slds-theme--default">
  <p>This is a
    <strong>default</strong> theme and here is a <a href="#">link</a>.</p>
</div>
<div class="slds-box slds-theme--shade">
  <p>This is a
    <strong>shade</strong> theme and here is a <a href="#">link</a>.</p>
</div>
<div class="slds-box slds-theme--inverse">
  <p>This is an
    <strong>inverse</strong> theme and here is a <a href="#">link</a>.</p>
</div>
<div class="slds-box slds-theme--alt-inverse">
  <p>This is an
    <strong>alt-inverse</strong> theme and here is a <a href="#">link</a>.</p>
</div>
<div class="slds-box slds-theme--info">
  <p>This is a
    <strong>info</strong> theme and here is a <a href="#">link</a>.</p>
</div>
<div class="slds-box slds-theme--success">
  <p>This is a
    <strong>success</strong> theme and here is a <a href="#">link</a>.</p>
</div>
<div class="slds-box slds-theme--warning">
  <p>This is a
    <strong>warning</strong> theme and here is a <a href="#">link</a>.</p>
</div>
<div class="slds-box slds-theme--error">
  <p>This is a
    <strong>error</strong> theme and here is a <a href="#">link</a>.</p>
</div>
<div class="slds-box slds-theme--offline">
  <p>This is an
    <strong>offline</strong> theme and here is a <a href="#">link</a>.</p>
</div>
<div class="slds-box slds-box slds-theme--shade slds-theme--alert-texture">
  <p>This theme has the
    <strong>alert texture</strong> theme added to the shade them and has a <a href="#">link</a>.</p>
</div>

Use a color theme to apply color to the background and text. Some color themes apply a background image or texture. Color themes are typically used with box themes, toasts and alerts.

Component Overview

Usage

This table gives you a quick overview of the SLDS CSS classes that can be applied to this component.
Class NameUsage
.slds-box
Applied to:

parent element

Outcome:

Provides 1rem base padding and borders

Required:

No, optional element or modifier

Comments:

--

.slds-box--x-small
Applied to:

.slds-box

Outcome:

Changes padding to .5rem

Required:

No, optional element or modifier

Comments:

--

.slds-box--small
Applied to:

.slds-box

Outcome:

Changes padding to .75rem

Required:

No, optional element or modifier

Comments:

--

.slds-theme--default
Applied to:

.slds-box

Outcome:

Sets the background color to white

Required:

No, optional element or modifier

Comments:

--

.slds-theme--shade
Applied to:

.slds-box

Outcome:

Sets a light gray background color

Required:

No, optional element or modifier

Comments:

--

.slds-theme--inverse
Applied to:

.slds-box

Outcome:

Sets the darkest blue background and light text and links

Required:

No, optional element or modifier

Comments:

--

.slds-theme--alt-inverse
Applied to:

.slds-box

Outcome:

Sets the alternative dark blue background and light text and links

Required:

No, optional element or modifier

Comments:

--

.slds-theme--info
Applied to:

Outcome:

Info feedback theme modifier

Required:

No, optional element or modifier

Comments:

This class can be applied to modify a .slds-box, notification, .slds-badge and other elements.

.slds-theme--success
Applied to:

Outcome:

Success feedback theme modifier

Required:

No, optional element or modifier

Comments:

This class can be applied to modify a .slds-box, notification, .slds-badge and other elements.

.slds-theme--warning
Applied to:

Outcome:

Warning feedback theme modifier

Required:

No, optional element or modifier

Comments:

This class can be applied to modify a .slds-box, notification, .slds-badge and other elements.

.slds-theme--error
Applied to:

Outcome:

Error feedback theme modifier

Required:

No, optional element or modifier

Comments:

This class can be applied to modify a .slds-box, notification, .slds-badge and other elements.

.slds-theme--offline
Applied to:

Outcome:

Offline feedback theme modifier

Required:

No, optional element or modifier

Comments:

This class can be applied to modify a .slds-box, notification, .slds-badge and other elements.

.slds-theme--alert-texture
Applied to:

Outcome:

Adds striped background

Required:

No, optional element or modifier

Comments:

Added to any .slds-theme--* class to give it the striped look

.slds-theme--inverse-text
Applied to:

Outcome:

Applies white text and links

Required:

No, optional element or modifier

Comments:

--